import { ActionButton, Button, Form, TextField } from "@adobe/react-spectrum";
import { useFetcher } from "react-router";
import { UpdateDevice } from "~/lib/server";
import { SelectLocation } from "~/ui/select-location";
import invariant from "tiny-invariant";
import type { Route } from "./+types/edit";




export async function clientAction({ params, request }: Route.ActionArgs) {
    invariant(params.id, "Missing device id param");
    const formData = await request.formData();
    const data = {
        name: formData.get("name"),
        locationId: +(formData.get("locationId") || 0),
    };

    const response = await UpdateDevice(+params.id, data);

    return response

}

// export function EditDevice({ device }: { device: Pick<Device, "id" | "name" | "locationId"> }) {

//     let fetcher = useFetcher();
//     const actionUrl = `/devices/${device.id}/edit`;
//     return (

//         <fetcher.Form className="flex flex-col"
//             action={actionUrl}
//             method="post"
//         >

//             <TextField name="name" label="设备名称" defaultValue={device.name} />
//             <SelectLocation defaultSelectedKey={device.locationId}></SelectLocation>
//             <Button variant="accent" type="submit" >修改</Button>
//         </fetcher.Form>


//     );
// }